<template>
  <el-row class="all-wrap">
    <dg-scrollbar ref="scrollbar" class="all-wrap__scrollbar">
      <ModuleCard>
        <template v-slot:header>基本信息</template>
        <detail-form :list="formFilds"> </detail-form>
      </ModuleCard>
      <ModuleCard>
        <template v-slot:header>关联信息</template>
        <comm-table
          ref="table"
          :condition="condition"
          :columns="columns"
          url="/v1/subject/findGlxxBySubjectId"
        ></comm-table>
      </ModuleCard>
    </dg-scrollbar>
  </el-row>
</template>
<script>
import DetailForm from '@/components/detail-form';
import ModuleCard from '@/components/layout/module-card';
import { findSubjectById } from '@/api/thematic';

const ThematicDetailFeilds = [
  [
    {
      label: '标题',
      field: 'title',
      col: 24
    }
  ],
  [
    {
      label: '正文',
      type: 'text',
      field: 'zw',
      col: 24,
      tooltip: true
    }
  ],
  [
    {
      label: '创建单位',
      field: 'createOrgName'
      // type: 'slot'
    },
    {
      label: '创建人员',
      field: 'createUserName'
    }
  ],
  [
    {
      label: '创建时间',
      field: 'createTime'
    }
  ]
];

export default {
  name: 'ThematicDetail',
  components: {
    DetailForm,
    ModuleCard
  },
  data() {
    return {
      formFilds: ThematicDetailFeilds,
      // 列表查询条件
      condition: {
        subjectId: {
          value: '',
          op: '='
        }
      },
      // 表格项
      columns: [
        { type: 'index', label: '序号', width: 70 },
        { label: '编号', prop: 'serialNo' },
        {
          label: '标题',
          prop: 'title',
          render: (h, row) => {
            const _this = this;
            const tagDeal = lead =>
              h(
                'el-tag',
                {
                  attrs: {
                    type: 'danger',
                    effect: 'plain',
                    size: 'mini'
                  }
                },
                `${lead}关注`
              );
            return h(
              'div',
              {
                class: 'table-title yq-list-wrap',
                on: {
                  click() {
                    // 来源类型：0-外部来文；1-要情上报；2-线索上报；3-110报警信息（情报）-研判；4-线索（情报特有）；5-110报警处理（续报）
                    const routeName = {
                      0: 'ExterCommunDetail',
                      1: 'ImpDetail',
                      2: 'AllBureausDetail',
                      3: 'PoliceNewsDetail',
                      4: 'LocalBureausDetail',
                      5: 'AlarmHandleDetail'
                    };
                    const routeData = _this.$router.resolve({
                      name: routeName[row.sourceType],
                      params: {
                        id: row.id
                      }
                    });
                    window.open(routeData.href, '_blank');
                  }
                }
              },
              [
                h('span', { class: 'v-link' }, row.title),
                row.isLdgz === '1' && tagDeal('其他领导'),
                row.isJldgz === '1' && tagDeal('局领导')
              ]
            );
          },
          width: 300
        }
      ]
    };
  },
  computed: {
    detailId() {
      return this.$route.params.id;
    }
  },
  methods: {
    init() {
      this.condition.subjectId.value = this.detailId;
      findSubjectById(this.detailId).then(res => {
        this.form = JSON.parse(JSON.stringify(res.data));
        const fields = ThematicDetailFeilds;
        // 基本信息
        let infoCols = JSON.parse(JSON.stringify(fields));
        infoCols.flatMap(item => {
          item.forEach(cItem => {
            cItem.value = this.form[cItem.field];
          });
        });
        this.formFilds = infoCols;
      });
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.all-wrap {
  padding-left: 2rem;
  // width: 87.5rem;
  max-width: 1400px;
  height: 75vh;
  box-sizing: content-box;
  background-color: #fff;

  &__scrollbar {
    /deep/.el-scrollbar__view {
      padding-right: 30px;
    }
  }
}
</style>
